<template>
  <div class="container">
    <el-input
      ref="input"
      v-if="showInput"
      v-model="inputContent"
      :placeholder="placeholder"
      class="container_input"
      size="medium"
      @blur="handleBlur"
      @keyup.enter.native="keyEnter"
    >
      <i slot="suffix" class="container_input_i">
        <img
          src="./images/ic-search.png"
          alt="搜索的图标"
          @click="handleSeach"
        />
      </i>
    </el-input>
    <div v-else class="container_icon" @click="handleInput">
      <img src="./images/ic-search.png" alt="搜索的图标" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    url: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showInput: false,
      inputContent: ''
    }
  },
  methods: {
    handleInput() {
      this.showInput = true
      // 自动获取焦点
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
    },
    handleSeach() {
      this.$emit('transSearchData', this.inputContent)
    },
    keyEnter() {
      this.handleSeach()
    },
    handleBlur() {
      if (!this.inputContent) {
        this.showInput = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  &_icon {
    cursor: pointer;
    padding: 4px 4px 0;
  }
  &_input {
    width: 300px;
    border-radius: 2px;
    margin-right: 4px;

    &_i {
      cursor: pointer;
      img {
        margin-top: 10px;
        width: 14px;
        height: 14px;
        background: #ffffff;
        border: 2px solid #d9d9d9;
      }
    }
  }
}
.el-input--suffix .el-input__inner {
  padding-right: 28px;
}
</style>
